<template>
  <div class='container'>
    <el-dialog
        title="预览文章"
        :visible="showPreview"
        @close="closePreview"
        width="800px"
        :modal-append-to-body="true"
      >
        <h2>{{ data.title }}</h2>
        <div class="title">
          <span>{{ createTime() }}</span>
          <span>{{ data.username }}</span>
          <span class="el-icon-view"></span>
          <span>{{ data.visits }}</span>
        </div>
        <el-alert class="info" type="info" :closable="false">
          <div v-html="data.articleBody" />
        </el-alert>
      </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  watch: {
    previewarticlesById () {
      this.data.title = this.previewarticlesById.title
      this.data.username = this.previewarticlesById.username
      this.data.articleBody = this.previewarticlesById.articleBody
      this.data.visits = this.previewarticlesById.visits
      this.data.time = this.previewarticlesById.createTime
    }
  },
  props: {
    showPreview: {
      type: Boolean,
      default: false
    },
    previewarticlesById: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      data: {
        title: '',
        username: '',
        articleBody: '',
        visits: ''
      }
    }
  },
  methods: {
    closePreview () {
      this.$emit('close_Preview')
      this.data = {
        title: '',
        username: '',
        articleBody: '',
        visits: ''
      }
    },
    createTime () {
      return dayjs(this.data.time).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped lang='scss'>
h2 {
  margin: 0;
  padding-bottom: 10px;
}
span {
  margin-left: 10px;
  margin-top: 10px;
  padding-bottom: 20px;
}
.info {
  border-top: 1px dashed #ccc;
  padding: 8px 0px;

}
::v-deep .el-alert .el-alert__description {
  color: #606266;
  font-size: 14px;
}
</style>
